<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>state</title>
</head>

<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">

		//1.创建组件
		class Weather extends React.Component {

			// 借助构造器初始化组件实例状态(调用一次)
			constructor(props) {
				console.log('constructor');
				super(props)
				// 初始化状态
				this.state = {
					isHot: true,
					wind: '微风'
				}
				// 解决changeWeather中this指向问题
				this.changeWeather = this.changeWeather.bind(this)
			}

			// 调用1+n次
			render() {
				console.log('render');
				// 读取状态
				const { isHot } = this.state
				return <h2 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}</h2>
			}

			// changeWeather放在了Weather的原型对象上,提供给组件实例使用(调用n次)
			// 通过weather实例调用changeweather时，changeweather中的this就是weather实例
			// 由于changeWeather是onClick的回调,不是通过实例直接调用的,是直接调用的
			// 类中的方法默认开启了局部的严格模式,所有changeWeather中的this指向undifined
			changeWeather() {
				console.log('changeWeather');
				// 严重注意:状态(state)不可直接更改，要借助一个内置的API去更改
				// this.state.isHot = !this.state.isHot; //直接更改错误写法
				// console.log(this);
				const isHot = this.state.isHot;

				// 严重注意:状态必须通过setstate进行更新,且更新是一种合并
				this.setState({ isHot: !isHot })
			}
		}

		//2.渲染组件到页面
		ReactDOM.render(<Weather />, document.getElementById('test'))


	</script>
</body>

</html>